<template>
    <el-menu :router="true" :default-active="route.path" mode="vertical" :collapse="isSollapseSidebar"
        :unique-opened="true" onSelecte="" :collapse-transition="false" active-text-color="#00b6a6"
        background-color="#263238" text-color="#fff" class="sidebar-menu" :style="`width: ${menuWidth}px;`">
        <!--静态菜单-->
        <!-- <el-menu-item index="/home">
            <el-icon>
                <HomeFilled />
            </el-icon>
            <template #title>
                <span>信息概览</span>
            </template>
</el-menu-item>
<el-sub-menu index="2">
    <template #title>
                <el-icon>
                    <User />
                </el-icon>
                <span>用户管理</span>
            </template>
    <el-menu-item index="/user/index">用户列表</el-menu-item>
    <el-menu-item index="/role/index">角色管理</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
    <template #title>
                <el-icon>
                    <setting />
                </el-icon>
                <span>系统配置</span>
            </template>
    <el-menu-item index="/permission/index">权限管理</el-menu-item>
    <el-menu-item index="/dict/index">字典管理</el-menu-item>
</el-sub-menu> -->
        <!--动态菜单-->
        <template v-for="(item, index) in menus">
            <el-menu-item v-if="item.hasChildren == false" :index="item.url">
                <el-icon>
                    <component :is="item.icon" />
                </el-icon>
                <template #title>
                    <span>{{ item.permissionName }}</span>
                </template>
            </el-menu-item>
            <el-sub-menu v-if="item.hasChildren" :index="index">
                <template #title>
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span>{{ item.permissionName }}</span>
                </template>
                <el-menu-item v-for="(child, cindex) in item.children" :index="child.url">{{ child.permissionName
                }}</el-menu-item>
            </el-sub-menu>
        </template>
    </el-menu>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { HomeFilled, User, Setting } from '@element-plus/icons-vue'
import emits from '@/utils/emits';
import { MittType, StorageKey } from '@/constant';
import appStorage from '@/stores/storage';

const router = useRouter();
const route = useRoute();

const isSollapseSidebar = ref(false);
const menuWidth = ref(233);
const menus = ref([])
// const menus = ref([{
//     "permissionId": "1985623895918645200",
//     "permissionName": "信息概览",
//     "permissionCode": "dashboard",
//     "url": "/dashboard",
//     "type": "menu",
//     "parentId": null,
//     "children": [],
//     "hasChildren": false
// },
// {
//     "permissionId": "1985623895918645201",
//     "permissionName": "系统配置",
//     "permissionCode": "systemcofig",
//     "url": null,
//     "type": "menu",
//     "parentId": null,
//     "children": [
//         {
//             "permissionId": "1985623895918645202",
//             "permissionName": "权限管理",
//             "permissionCode": "permission",
//             "url": "/permission/index",
//             "type": "menu",
//             "parentId": "1985623895918645201",
//             "children": [],
//             "hasChildren": false
//         },
//         {
//             "permissionId": "1985623895918645203",
//             "permissionName": "字典管理",
//             "permissionCode": "dict",
//             "url": "/dict/index",
//             "type": "menu",
//             "parentId": "1985623895918645201",
//             "children": [],
//             "hasChildren": false
//         }
//     ],
//     "hasChildren": true
// },
// {
//     "permissionId": "1985623895918645204",
//     "permissionName": "用户管理",
//     "permissionCode": "usermanage",
//     "url": null,
//     "type": "menu",
//     "parentId": null,
//     "children": [
//         {
//             "permissionId": "1985623895918645205",
//             "permissionName": "角色列表",
//             "permissionCode": "role",
//             "url": "/role/index",
//             "type": "menu",
//             "parentId": "1985623895918645204",
//             "children": [],
//             "hasChildren": false
//         },
//         {
//             "permissionId": "1985623895918645206",
//             "permissionName": "用户列表",
//             "permissionCode": "user",
//             "url": "/user/index",
//             "type": "menu",
//             "parentId": "1985623895918645204",
//             "children": [],
//             "hasChildren": false
//         }
//     ],
//     "hasChildren": true
// }])
onMounted(() => {
    menus.value = appStorage.getSession(StorageKey.PERMISSION_MENU)
    // console.log(menus)

});


//函数
/**
 * 设置菜单边栏可见性。
 */
emits.on(MittType.Switchsidebar, (visibility) => {
    isSollapseSidebar.value = !visibility;
    menuWidth.value = !visibility ? 78 : 233;
});

</script>


<style lang="less" scoped>
.sidebar-menu {
    top: 50px;
    left: 0;
    bottom: 0;
    margin: 0;
    height: 100%;
    position: fixed;
}
</style>